<template>
  <Modal
    v-model:active="beamModel"
    transfer
    title="梁单元创建"
    hide-mask
    draggable
    :no-footer="true"
    @close="closeBtn"
    :width="650"
  >
    <div class="box">
      <Form :model="formBeamModel" style="width: 100%" :hide-label="true">
        <div class="title">
          <div class="title_color"></div>
          <div class="title_content">Operaion</div>
        </div>
        <FormItem>
          <div class="selectorBox">
            <RadioGroup v-model:value="formBeamModel.operaion">
              <Radio
                class="radioStyle"
                v-for="item in itemsList"
                :key="item"
                :label="item"
              ></Radio>
            </RadioGroup>
          </div>
        </FormItem>
        <div class="title">
          <div class="title_color"></div>
          <div class="title_content">Selector</div>
        </div>
        <FormItem>
          <div class="selectorBox">
            <div class="selector-buttons">
              <template v-if="formBeamModel.operaion === 'ByNode'">
                <button
                  class="selector-button"
                  :class="{ active: leftNodeActive }"
                  @click="handleLeftNode"
                >
                  Node
                </button>
                <button
                  class="selector-button"
                  :class="{ active: rightNodeActive }"
                  @click="handleRightNode"
                >
                  Node
                </button>
              </template>
              <template v-else>
                <button class="selector-button active" @click="handLines">
                  Lines
                </button>
                <button class="selector-button icon-button">
                  <img
                    src="../../assets/delete.svg"
                    alt=""
                    class="icon imgStyle"
                  />
                </button>
              </template>
            </div>
          </div>
        </FormItem>
        <FormItem>
          <div class="selectorBox">
            <Grid :gap="8" :columns="24">
              <Cell :width="6">
                <div class="lineMeshSize">Orientation:</div></Cell
              >
              <Cell :width="18">
                <div class="selector-container">
                  <div>
                    <Dropdown placement="right">
                      <Button class="selector-button2"
                        ><img
                          src="../../assets/lowerTriangle.svg"
                          alt=""
                          class="icon imgStyle"
                      /></Button>
                      <template #drop>
                        <DropdownList>
                          <DropdownItem
                            v-for="(item, index) in orientationList"
                            :key="index"
                            @select="orientationBtn(item)"
                          >
                            {{ item.label }}
                          </DropdownItem>
                        </DropdownList>
                      </template>
                    </Dropdown>
                  </div>

                  <div class="selector-buttons">
                    <button class="selector-button active">
                      {{ formBeamModel.orientation }}
                    </button>
                    <button class="selector-button icon-button">
                      <img
                        src="../../assets/delete.svg"
                        alt=""
                        class="icon imgStyle"
                      />
                    </button>
                  </div>
                </div>
              </Cell>
            </Grid>
          </div>
        </FormItem>
        <div class="title">
          <div class="title_color"></div>
          <div class="title_content">Parameter</div>
        </div>
        <template v-if="formBeamModel.operaion === 'ByNode'">
          <FormItem>
            <div class="selectorBox">
              <Grid :gap="8" :columns="24">
                <Cell :width="8">
                  <Checkbox v-model:checked="formBeamModel.option1Checked">
                    Use Existing Midnodes
                  </Checkbox>
                </Cell>
                <Cell :width="16">
                  <div style="display: flex; align-items: center">
                    <div class="lineMeshSize" style="margin-right: 8px">
                      Tol:
                    </div>
                    <Input
                      v-model:value="formBeamModel.input1Value"
                      style="flex: 1"
                    ></Input>
                  </div>
                </Cell>
              </Grid>
            </div>
          </FormItem>
          <FormItem>
            <div class="selectorBox">
              <Grid :gap="8" :columns="24">
                <Cell :width="18">
                  <Checkbox v-model:checked="formBeamModel.option2Checked">
                    Auto Execute
                  </Checkbox>
                </Cell>
              </Grid>
            </div>
          </FormItem>
          <FormItem>
            <div class="selectorBox">
              <Grid :gap="8" :columns="24">
                <Cell :width="5">
                  <Dropdown placement="right" style="width: 100%">
                    <Button>Elem Type=</Button>
                    <template #drop>
                      <DropdownList>
                        <DropdownItem
                          v-for="(item, index) in unitTypeList"
                          :key="index"
                          @select="unitTypeBtn(item)"
                        >
                          {{ item.label }}
                        </DropdownItem>
                      </DropdownList>
                    </template>
                  </Dropdown>
                </Cell>
                <Cell :width="19">
                  <Input v-model:value="formBeamModel.elemType" clearable></Input>
                </Cell>
              </Grid>
            </div>
          </FormItem>
        </template>
        <template v-else>
          <FormItem>
            <div class="selectorBox">
              <Grid :gap="8" :columns="24">
                <Cell :width="6"> Elem Size Type: </Cell>
                <Cell :width="18">
                  <RadioGroup v-model:value="formBeamModel.elemSizeType">
                    <Radio
                      class="radioStyle"
                      v-for="item in elemSizeTypeList"
                      :key="item"
                      :label="item"
                    ></Radio>
                  </RadioGroup>
                </Cell>
              </Grid>
            </div>
          </FormItem>
          <FormItem>
            <div class="selectorBox">
              <Grid :gap="8" :columns="24">
                <Cell :width="6">
                  <div class="lineMeshSize">Line Mesh Data:</div>
                </Cell>
                <Cell :width="16">
                  <Input v-model:value="formBeamModel.lineMeshData"></Input>
                </Cell>
              </Grid>
            </div>
          </FormItem>
          <FormItem>
            <div class="selectorBox">
              <Checkbox v-model:checked="formBeamModel.mathExisting">
                Match Existing Mesh
              </Checkbox>
            </div>
          </FormItem>
          <FormItem>
            <div class="selectorBox">
              <Grid :gap="8" :columns="24">
                <Cell :width="5">
                  <Dropdown placement="right" style="width: 100%">
                    <Button>Elem Type=</Button>
                    <template #drop>
                      <DropdownList>
                        <DropdownItem
                          v-for="(item, index) in unitTypeList"
                          :key="index"
                          @select="unitTypeBtn(item)"
                        >
                          {{ item.label }}
                        </DropdownItem>
                      </DropdownList>
                    </template>
                  </Dropdown>
                </Cell>
                <Cell :width="19">
                  <Input v-model:value="formBeamModel.elemType" clearable></Input>
                </Cell>
              </Grid>
            </div>
          </FormItem>
        </template>
        <div class="title">
          <div class="title_color"></div>
          <div class="title_content">创建到：</div>
        </div>

        <div class="selectorBox">
          <Grid :gap="8" :columns="24">
            <Cell :width="3">
              <Dropdown placement="right">
                <Button>
                  <img
                    src="../../assets/lowerTriangle.svg"
                    alt=""
                    class="icon imgStyle"
                  />
                </Button>

                <template #drop>
                  <DropdownList>
                    <DropdownItem
                      v-for="(item, index) in createList"
                      :key="index"
                      @select="selectBtn(item)"
                    >
                      {{ item.label }}
                    </DropdownItem>
                  </DropdownList>
                </template>
              </Dropdown>
            </Cell>
            <Cell :width="4">
              <Button>当前组件</Button>
            </Cell>
            <Cell :width="14">
              <FormItem>
                <Input
                  disabled
                  v-model:value="formBeamModel.createTo"
                  clearable
                ></Input>
              </FormItem>
            </Cell>
          </Grid>
        </div>
      </Form>
      <div class="foot-box">
        <Button @click="confirm">Create</Button>
        <Button @click="undoBtn">undo</Button>
      </div>
    </div>
  </Modal>
</template>
<script setup lang="ts">
import {
  Modal,
  Button,
  Form,
  FormItem,
  RadioGroup,
  Radio,
  NumberInput,
  Input,
  Grid,
  Cell,
  Dropdown,
  DropdownList,
  DropdownItem,
  Checkbox,
} from "cax-ui";
import { storeToRefs } from "pinia";
import { ref, watch } from "vue";
import { useRightMeshEditStore } from "@/UI/store/rightMeshEditStore";
import { useCoreStore, _global } from "@/UI/store";
import { LineOptions, MeshEdgeData } from '../interface';
import { LineActor, PointerActor, LabelActor } from "cax-base";
const coreStore = useCoreStore();
const rightMeshEditStore = useRightMeshEditStore();
const { beamModel } = storeToRefs(rightMeshEditStore);
const formBeamModel = ref({
  operaion: "",
  elemSizeType: "",
  lineMeshData: "",
  mathExisting: false,
  elemType: "",
  createTo: "",
  orientation: "",
  option1Checked: false,
  input1Value: "",
  option2Checked: false,
});
const itemsList = ref(["ByLine", "ByNode"]);
const leftNodeActive = ref(false);
const rightNodeActive = ref(false);
const elemSizeTypeList = ref(["Size", "Numbers"]);
const unitTypeList = ref([
  {
    label: "CBEAM",
    value: "1",
  },
  {
    label: "CBAR",
    value: "2",
  },
  {
    label: "CBEND",
    value: "3",
  },
]);
const createList = ref([
  {
    label: "Set_1",
    value: "1",
  },
  {
    label: "Set_2",
    value: "2",
  },
]);
const orientationList = ref([
  {
    label: "X轴",
    value: "1",
  },
  {
    label: "Y轴",
    value: "2",
  },
  {
    label: "Z轴",
    value: "3",
  },
  {
    label: "过三点N1,N2,N3的平面",
    value: "4",
  },
  {
    label: "边切向",
    value: "5",
  },
  {
    label: "面的法向",
    value: "6",
  },
  {
    label: "In Basic",
    value: "7",
  },
  {
    label: "In Displacement",
    value: "8",
  },
  {
    label: "Direction Node",
    value: "9",
  },
]);
interface beamNode {
  nodeId?: any;
  partId?: any;
  x?: any;
  y?: any;
  z?: any;
}
let leftNode: beamNode;
let rightNode: beamNode;
let leftNodeDof: any;
let rightNodeDof: any;

interface BeamValue {
  beamId?: any;
  partId?: any;
  leftNode?: any;
  rightNode?: any;
  uid?: any;
  eleValues?: any;
  // 存储formBeamModel值
  createBeamValues?: any;
}
let beamValues: BeamValue[] = [];

function selectBtn(item) {
  formBeamModel.value.createTo = item.label;
}
function handleLeftNode() {
  leftNodeActive.value = true;
  const selectedPoints = _global.Engine.selectBoxComp.selectedPoints.map(
    (value) => {
      return {
        nodeId: value.nodeId,
        partId: value.partId,
        x: value.x,
        y: value.y,
        z: value.z,
      };
    }
  );
  leftNode = selectedPoints[selectedPoints.length - 1];
  if (!leftNode) {
    alert("请先选择一个点");
    return;
  }
  leftNodeDof = new PointerActor([leftNode.x, leftNode.y, leftNode.z], {
    color: [0, 1, 0],
    radius: 0.8,
  });
  _global.Engine.model.add(leftNodeDof);
  _global.Engine.selectBoxComp.resetSelectedMeshPoint();
}

function handleRightNode() {
  rightNodeActive.value = true;
  const selectedPoints = _global.Engine.selectBoxComp.selectedPoints.map(
    (value) => {
      return {
        nodeId: value.nodeId,
        partId: value.partId,
        x: value.x,
        y: value.y,
        z: value.z,
      };
    }
  );
  rightNode = selectedPoints[selectedPoints.length - 1];
  if (!rightNode) {
    alert("请先选择一个点");
    return;
  }
  rightNodeDof = new PointerActor([rightNode.x, rightNode.y, rightNode.z], {
    color: [0, 1, 0],
    radius: 0.8,
  });
  _global.Engine.model.add(rightNodeDof);
  _global.Engine.selectBoxComp.resetSelectedMeshPoint();
}
function orientationBtn(item) {
  formBeamModel.value.orientation = item.label;
}
function unitTypeBtn(item) {
  formBeamModel.value.elemType = item.label;
}

function handLines() {
  // 选择线
  coreStore.setEngineState(3);
}
function confirm() {
  //后端函数
  if (formBeamModel.value.operaion === "ByNode") {
    _global.Engine.beam
      .crateBeamByNode(leftNode, rightNode, formBeamModel.value)
      .then((res: any) => {
        console.log("res", res);
        res = res.beam_info;
        const beamId = res["metadata"][0].eid;
        //创建杆的效果
        const uid = "beam" + beamId;
        const color: [number, number, number] = [0, 1, 0];
        const width = 5;
        let data: MeshEdgeData = {
          uid: uid,
        };
        _global.Engine.measureComp.createMeshLine(
          data,
          [leftNode.x, leftNode.y, leftNode.z],
          [rightNode.x, rightNode.y, rightNode.z],
          color,
          width
        );
        // _global.Engine.model.remove(leftNodeDof);
        // _global.Engine.model.remove(rightNodeDof);
        leftNode = {};
        rightNode = {};
        //存储数据
        beamValues.push({
          beamId: beamId,
          partId: leftNode.partId,
          leftNode: leftNode,
          rightNode: rightNode,
          eleValues: res,
          createBeamValues: formBeamModel.value,
          uid: uid,
        });
        console.log("beamValues", beamValues);
      });
  } else {
    _global.Engine.beam
      .crateBeamByLine(formBeamModel.value)
      .then((res: any) => {
        beamValues = [];
        const beams_info = res.beams_info;
        const partId = res.partId;
        console.log("res", beams_info);
        for (const beamId in beams_info) {
          const nodes = beams_info[beamId];
          const leftNode = nodes[0];
          const rightNode = nodes[1];
          const uid = "beam" + beamId;
          const leftNode_co = leftNode["elem_nodes_coordinates"];
          const rightNode_co = rightNode["elem_nodes_coordinates"];
          const color: [number, number, number] = [0, 1, 0];
          const width = 5;
          let data: MeshEdgeData = {
            uid: uid,
          };
          _global.Engine.measureComp.createMeshLine(
            data,
            [leftNode_co.x, leftNode_co.y, leftNode_co.z],
            [rightNode_co.x, rightNode_co.y, rightNode_co.z],
            color,
            width
          );
          //创建点，最终改为label
          _global.Engine.model.add(
            new PointerActor([leftNode_co.x, leftNode_co.y, leftNode_co.z], {
              color: [0, 1, 0],
              radius: 0.8,
            })
          );
          beamValues.push({
            beamId: leftNode.eid,
            partId: partId,
            leftNode: leftNode,
            rightNode: rightNode,
            eleValues: nodes,
            createBeamValues: formBeamModel.value,
          });
        }
        console.log("beamValues", beamValues);
        // const labelActor = new LabelActor(
        //   [leftNode_co.x, leftNode_co.y, leftNode_co.z],
        //   {
        //     text: "beam",
        //   }
        // );
        // _global.Engine.model.add(labelActor)
      });
    coreStore.setEngineState(0);
  }
  console.log("beamValues", beamValues);
  // console.log("uid", uid);
  rightMeshEditStore.setSeamModelValue(formBeamModel.value);
  // beamModel.value = false;
}

function closeBtn() {
  beamModel.value = false;
}
function undoBtn() {
  const lastBeam = beamValues.pop();
  if (lastBeam) {
    const uid = lastBeam.uid;
    _global.Engine.measureComp.removeMeshActor(uid);
  }
  _global.Engine.beam.undoBeam("beam").then((res: any) => {
    console.log("res", res);
  });
  // beamModel.value = false;
}
</script>
<style scoped>
.box {
  padding: 15px;
}
.title {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 16px;
  margin-bottom: 16px;

  .title_color {
    width: 4px;
    height: 12px;
    background: #339af0;
    margin-right: 8px;
  }
  .title_content {
    opacity: 1;
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0em;
    font-variation-settings: "opsz" auto;
    /* content/主要一级primary */
    /* 样式描述：--vxp-content-color-primary */
    color: #212529;
  }
}
.imgStyle {
  width: 20px;
  height: 20px;
}
.selectorBox {
  padding-left: 80px;
  margin-bottom: 15px;
  width: 100%;
}
.foot-box {
  margin-top: 40px;
  width: 100%;
  height: 40px;
  text-align: right;
}
:deep(.vxp-form__item) {
  margin-bottom: 0px;
}
.selectorBox {
  padding-left: 80px;
  margin-bottom: 15px;
  width: 100%;
}
.radioStyle {
  margin-right: 100px;
}
.lineMeshSize {
  height: 30px;
  line-height: 30px;
}
.selector-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
}
.selector-button {
  height: 32px;
  width: 200px;
  padding: 0 15px;
  border: 1px solid #ccc;
  background-color: #fff;
  cursor: pointer;
  outline: none;
}

.selector-button.active {
  background-color: #e6f7a7;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  /* flex-grow: 1; */
  font-weight: normal;
}
.icon-button {
  width: 32px;
  padding: 3px 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-left: none;
  background-color: #fff;
}
.selector-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.selector-button2 {
  height: 32px;
  width: 42px;
  padding: 0 15px;
  border: 1px solid #ccc;
  background-color: #fff;
  cursor: pointer;
  outline: none;
}
:deep(.vxp-button-vars) {
  --vxp-button-min-width: none;
}
</style>
